<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        品牌：<input type="text" v-model='contrastList.brand' name="brand" id="brand"><br>
        价格：<input type="text" v-model='contrastList.price' name="price" id="price"><br>
        车型: <input type="text" v-model='contrastList.vehicle' name="vehicle" id="vehicle"><br>
        年代款：<input type="text" v-model='contrastList.years' name="years" id="years"><br>
        驱动方式：<input type="text" v-model='contrastList.drive' name="drive" id="drive"><br>
        能源：<input type="text" v-model='contrastList.energy' name="energy" id="energy"><br>
        车身结构：<input type="text" v-model='contrastList.construction' name="construction" id="construction">

        <div v-html='divArr'>
           
        </div>

    </div>


    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                carList : [
                    {
                       'brand':'奔驰',
                       'price':'15万',
                       'vehicle':'奔驰A级',
                       'years':2021,
                       'drive':'前驱',
                       'energy':'汽油',
                       'construction':'三箱'
                    },
                    {
                       'brand':'奔驰',
                       'price':'40万',
                       'vehicle':'奔驰A级AMG',
                       'years':2021,
                       'drive':'前驱',
                       'energy':'汽油',
                       'construction':'三箱'
                    },
                    {
                       'brand':'奔驰',
                       'price':'47万',
                       'vehicle':'奔驰C级',
                       'years':2021,
                       'drive':'前驱',
                       'energy':'汽油',
                       'construction':'三箱'
                    },
                    {
                       'brand':'奔驰',
                       'price':'58万',
                       'vehicle':'奔驰GLC',
                       'years':2021,
                       'drive':'前驱',
                       'energy':'汽油',
                       'construction':'三箱'
                    },
                    {
                       'brand':'奔驰',
                       'price':'300万',
                       'vehicle':'奔驰G63',
                       'years':2021,
                       'drive':'四驱',
                       'energy':'汽油',
                       'construction':'三箱'
                    },
                ],
                contrastList : 
                    {
                       'brand':'',
                       'price':'',
                       'vehicle':'',
                       'years':'',
                       'drive':'',
                       'energy':'',
                       'construction':''
                    },
                divArr:'',
            },
            computed(){
                
            },
            watch:{
                contrastList : {
                    deep : true,
                    handler(newValue,oldValue){
                        for(let i = 0; i < this.carList.length; i++){
                            if(newValue.brand === this.carList[i].brand){
                                this.divArr += `
                                <p>
                                    '品牌':'${this.carList[i].brand}',
                                    '价格':'${this.carList[i].price}',
                                    '车型':'${this.carList[i].vehicle}',
                                    '年份':'${this.carList[i].years}',
                                    '驱动':'${this.carList[i].drive}',
                                    'energy':'${this.carList[i].energy}',
                                    'construction':'${this.carList[i].construction}'
                                </p>
                                `
                            };
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>